<!--
 * @Author: luoyong/471826078@qq.com
 * @Date: 2020-09-14 17:30:43
 * @LastEditors: younghxp
-->
<template>
  <div class="container alert">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon">
      <el-form label-width="100px" class="demo-ruleForm" inline>
        <el-row>
          <el-col :span="12">
            <el-form-item label="选择区域" prop="areaId">
              <el-cascader
                v-model="areaId"
                :options="areaIdOpt"
                @change="getAreaId"
                clearable
                filterable
                placeholder="请选择"
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-button class="commonBut saveBtn funComBut" @click="save"
              >保存</el-button
            >
            <el-button
              class="commonBut"
              v-show="showDelete"
              type="danger"
              @click="clearSetting(areaIds)"
              >清除配置</el-button
            >
          </el-col>
          <el-col class="noDataTip" v-if="!showDelete"
            >该区域暂未设置代发方式，沿用上级区域代发设置，如有区域特殊要求，请手动设置并保存</el-col
          >
        </el-row>
        <el-row>
          <el-col v-if="!isEsUser()">
            <div class="infoTitle">
              预警严重程度设置<span style="font-size: 12px; font-weight: normal"
                >（仅部署区域最上级区域可设置，下级区域不可修改）</span
              >
            </div>
            <ul class="setting">
              <li>
                <div class="settingList alertTimeRulesBox">
                  <el-form
                    :model="alertTimeForm"
                    :rules="alertTimeRules"
                    ref="alertTimeForm"
                  >
                    <div class="settingLists">
                      严重程度（长时间未处理）：
                      <el-form-item prop="alertTime15">
                        <span class="alertTag alertTagBg-15"></span>
                        <el-input
                          type="number"
                          v-model.number="alertTimeForm.alertTime15"
                          :disabled="degreeInputDisabled"
                          class="settingListInput"
                        ></el-input
                        >天(含)内
                      </el-form-item>
                    </div>
                    <div class="settingLists">
                      <el-form-item prop="alertTime30">
                        <span class="alertTag alertTagBg-16-30"></span
                        >{{ alertTime15Fun }}-
                        <el-input
                          type="number"
                          v-model.number="alertTimeForm.alertTime30"
                          :disabled="degreeInputDisabled"
                          class="settingListInput"
                        ></el-input
                        >天(含)内
                      </el-form-item>
                    </div>
                    <div class="settingLists">
                      <el-form-item prop="alertTime60">
                        <span class="alertTag alertTagBg-31-60"></span
                        >{{ alertTime30Fun }}-
                        <el-input
                          type="number"
                          v-model.number="alertTimeForm.alertTime60"
                          :disabled="degreeInputDisabled"
                          class="settingListInput"
                        ></el-input
                        >天(含)内
                      </el-form-item>
                    </div>
                    <div class="settingLists">
                      <el-form-item>
                        <span class="alertTag alertTagBg-61"></span
                        >{{ alertTime60Fun }}天(含)以上
                      </el-form-item>
                    </div>
                  </el-form>
                </div>
              </li>
            </ul>
          </el-col>
          <el-col>
            <div class="infoTitle">分账管理类预警</div>
            <ul class="setting">
              <li v-for="(item, index) in list" :key="index">
                <div class="settingList" v-if="item.subcategory == 30">
                  <div class="settingListTitle settingLists">
                    {{ item.bankName }}
                  </div>
                  <div class="settingListSwitch settingLists">
                    预警开关:
                    <el-switch
                      v-model="item.newValue"
                      active-value="1"
                      inactive-value="0"
                      @change="changeRadio($event, index)"
                    ></el-switch>
                  </div>

                  <div
                    class="settingLists"
                    style="width: 700px; vertical-align: top"
                  >
                    <span
                      v-if="
                        item.name === '01' ||
                        item.name === '06' ||
                        item.name == '32'
                      "
                      >超过</span
                    >
                    <el-select
                      @change="checkTimeTypeValue($event, index, 'gtTimeType')"
                      v-model="item.gtTimeType"
                      placeholder="请选择时间类型"
                      style="width: 135px"
                    >
                      <el-option label="项目建档日期" value="1"></el-option>
                      <el-option label="项目开工日期" value="2"></el-option>
                      <el-option label="自定义日期" value="3"></el-option>
                    </el-select>
                    <el-date-picker
                      @change="checkCustomValue($event, index, 'gtCustom')"
                      style="width: 140px"
                      v-if="item.gtTimeType === '3'"
                      v-model="item.gtCustom"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                    <span
                      v-if="
                        item.name === '07' ||
                        item.name === '08' ||
                        item.name === '09'
                      "
                      >之后，</span
                    >
                    <el-input
                      class="settingListInput settingLists"
                      v-if="
                        item.name == '01' ||
                        item.name == '06' ||
                        item.name == '32'
                      "
                      type="number"
                      v-model.number="item.gtValue"
                      @blur="checkBlurValue($event, index, 'gtValue')"
                    ></el-input>
                    <!-- <div class="settingListTips settingLists"> -->
                    <span v-if="item.name === '07'"
                      >专户实际拨付总金额低于拨付计划当前累计总金额且超过当前拨付周期截止日进行预警</span
                    >
                    <span v-if="item.name === '08'"
                      >某一段拨付周期内，专户实际拨付金额为0即预警</span
                    >
                    <span v-if="item.name === '09'"
                      >专户账号未在相应银行查询到，账号填写错误或账号不存在</span
                    >
                    <span v-if="item.name === '01'"
                      >天未录入工资专户进行预警</span
                    >
                    <span v-if="item.name === '06'"
                      >天内未创建拨付计划或拨付计划被作废</span
                    >
                    <span v-if="item.name === '32'"
                      >天，专户已签约，但专户流水中类型为“缴存”的流水之和≤0，且专户余额≤0、且代发流水之和≤0则预警。</span
                    >
                    <!-- </div> -->
                  </div>

                  <div style="padding-left: 326px; margin-top: 15px">
                    预警消除权限：
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermJC"
                      >监察</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermBK"
                      >银行</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermHY"
                      >行业主管</el-checkbox
                    >
                  </div>
                  <div
                    v-if="item.curValue == 1 && item.newValue != item.curValue"
                    style="padding-left: 326px; margin-top: 15px"
                  >
                    历史数据是否展示:
                    <el-radio-group v-model="item.oldValue">
                      <el-radio :label="'1'">展示</el-radio>
                      <el-radio :label="'2'">隐藏</el-radio>
                      <el-radio :label="'0'">删除</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </li>
            </ul>
          </el-col>
          <el-col>
            <div class="infoTitle">实名制管理类预警</div>
            <ul class="setting">
              <li v-for="(item, index) in list" :key="index">
                <div class="settingList" v-if="item.subcategory == 31">
                  <div class="settingListTitle settingLists">
                    {{ item.bankName }}
                  </div>
                  <div class="settingListSwitch settingLists">
                    预警开关:
                    <el-switch
                      v-model="item.newValue"
                      active-value="1"
                      inactive-value="0"
                      @change="changeFirst($event, index, 'ltCheck')"
                    ></el-switch>
                  </div>
                  <div
                    class="settingLists"
                    style="width: 700px; vertical-align: top"
                  >
                    <span
                      v-if="
                        item.name == '02' ||
                        item.name == '03' ||
                        item.name == '10' ||
                        item.name == '33'
                      "
                      >项目超过</span
                    >
                    <span
                      v-if="
                        item.name == '26' ||
                        item.name == '28' ||
                        item.name == '30' ||
                        item.name == '31'
                      "
                      >超过</span
                    >
                    <el-select
                      @change="checkTimeTypeValue($event, index, 'gtTimeType')"
                      v-model="item.gtTimeType"
                      placeholder="请选择时间类型"
                      style="width: 135px"
                    >
                      <el-option label="项目建档日期" value="1"></el-option>
                      <el-option label="项目开工日期" value="2"></el-option>
                      <el-option label="自定义日期" value="3"></el-option>
                    </el-select>
                    <el-date-picker
                      @change="checkCustomValue($event, index, 'gtCustom')"
                      style="width: 140px"
                      v-if="item.gtTimeType === '3'"
                      v-model="item.gtCustom"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                    <span v-if="item.name == '27' || item.name == '34'"
                      >之后，在职状态的管理人员（施工员、安全员、材料员、劳务员、资料员）中，任意人员超过</span
                    >
                    <el-input
                      class="settingListInput settingLists"
                      v-if="item.name != '02'"
                      type="number"
                      v-model.number="item.gtValue"
                      @blur="checkBlurValue($event, index, 'gtValue')"
                    ></el-input>
                    <span v-if="item.name === '02'"
                      >录入人员年龄小于16岁进行预警</span
                    >
                    <span
                      v-if="
                        (item.ltValue != null || item.ltValue != undefined) &&
                        item.name === '10'
                      "
                      >天且签订少于</span
                    >
                    <span
                      v-if="
                        (item.ltValue != null || item.ltValue != undefined) &&
                        item.name === '30'
                      "
                      >天，已签订合同的人数占录入人数的比例低于</span
                    >
                    <span
                      v-if="
                        (item.ltValue != null || item.ltValue != undefined) &&
                        item.name === '31'
                      "
                      >天，项目录入人数小于</span
                    >
                    <el-input
                      class="settingListInput settingLists"
                      v-if="
                        (item.ltValue != null || item.ltValue != undefined) &&
                        item.name === '10'
                      "
                      type="number"
                      v-model.number="item.ltValue"
                      @blur="checkBlurValue($event, index, 'ltValue')"
                    ></el-input>
                    <el-input
                      class="settingListInput settingLists"
                      v-if="
                        (item.ltValue != null || item.ltValue != undefined) &&
                        item.name === '30'
                      "
                      type="number"
                      v-model.number="item.ltValue"
                      @blur="checkBlurValue($event, index, 'ltValue')"
                    ></el-input>
                    <el-input
                      class="settingListInput settingLists"
                      v-if="
                        (item.ltValue != null || item.ltValue != undefined) &&
                        item.name === '31'
                      "
                      type="number"
                      v-model.number="item.ltValue"
                      @blur="checkBlurValue($event, index, 'ltValue')"
                    ></el-input>
                    <span
                      v-if="
                        (item.ltValue != null || item.ltValue != undefined) &&
                        item.name === '10'
                      "
                      >份劳动合同进行预警</span
                    >
                    <span
                      v-if="
                        (item.ltValue != null || item.ltValue != undefined) &&
                        item.name === '30'
                      "
                      >%则预警。（已签订合同包含APP签订及上传合同附件，录入人员包含在职及离职）</span
                    >
                    <span
                      v-if="
                        (item.ltValue != null || item.ltValue != undefined) &&
                        item.name === '31'
                      "
                      >人，则预警</span
                    >
                    <span v-if="item.name === '03'">天且考勤次数少于</span>
                    <el-input
                      class="settingListInput settingLists"
                      v-if="
                        (item.ltValue != null || item.ltValue != undefined) &&
                        item.name === '03'
                      "
                      type="number"
                      v-model.number="item.ltValue"
                      @blur="checkBlurValue($event, index, 'ltValue')"
                    ></el-input>
                    <span v-if="item.name === '03'">次进行预警</span>
                    <span v-if="item.name === '26'"
                      >天未全部录入项目管理人员（施工员、安全员、材料员、劳务员、资料员）（已离职不算已有）实名信息则进行预警</span
                    >
                    <span v-if="item.name === '27'"
                      >天无考勤更新则进行预警</span
                    >
                    <span v-if="item.name == '34'"
                      >天无考勤更新则进行预警；(项目非开工日不纳入{{
                        item.gtValue
                      }}个自然日计算)</span
                    >
                    <span v-if="item.name === '28'"
                      >天未设置劳资专管员则进行预警</span
                    >
                    <span v-if="item.name === '29'"
                      >天没有审核通过的劳资专管员证书资质</span
                    >
                    <span v-if="item.name === '33'"
                      >天无考勤记录进行预警；(项目非开工日不纳入{{
                        item.gtValue
                      }}个自然日计算)</span
                    >
                  </div>
                  <!-- 实名制考勤预警独有 -->
                  <div
                    v-if="item.name === '03'"
                    style="margin-left: 177px; margin-top: 15px"
                  >
                    <div class="settingListSwitch settingLists">
                      预警开关:
                      <el-switch
                        v-model="item.ltCheck"
                        active-value="1"
                        inactive-value="0"
                        @change="changeSecond($event, index, 'newValue')"
                      ></el-switch>
                    </div>

                    <div class="settingLists">项目超过</div>
                    <el-select
                      @change="checkTimeTypeValue($event, index, 'gtTimeType')"
                      v-model="item.gtTimeType"
                      placeholder="请选择时间类型"
                      style="width: 135px"
                    >
                      <el-option label="项目建档日期" value="1"></el-option>
                      <el-option label="项目开工日期" value="2"></el-option>
                      <el-option label="自定义日期" value="3"></el-option>
                    </el-select>
                    <el-date-picker
                      @change="checkCustomValue($event, index, 'gtCustom')"
                      style="width: 140px"
                      v-if="item.gtTimeType === '3'"
                      v-model="item.gtCustom"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                    <el-input
                      class="settingListInput settingLists"
                      v-if="item.gtValue2 != null || item.gtValue2 != undefined"
                      type="number"
                      v-model.number="item.gtValue2"
                      @blur="checkBlurValue($event, index, 'gtValue2')"
                    ></el-input>
                    <div class="settingListTips settingLists">
                      天无考勤记录进行预警
                    </div>
                  </div>
                  <div style="padding-left: 326px; margin-top: 15px">
                    预警消除权限：
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermJC"
                      >监察</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermBK"
                      >银行</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermHY"
                      >行业主管</el-checkbox
                    >
                  </div>
                  <div v-if="item.name !== '03'">
                    <div
                      v-if="
                        item.curValue == 1 && item.newValue != item.curValue
                      "
                      style="padding-left: 326px; margin-top: 15px"
                    >
                      历史数据是否展示:
                      <el-radio-group v-model="item.oldValue">
                        <el-radio :label="'1'">展示</el-radio>
                        <el-radio :label="'2'">隐藏</el-radio>
                        <el-radio :label="'0'">删除</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                  <div v-else>
                    <div
                      v-if="
                        (item.curValue == 1 &&
                          item.newValue != item.curValue) ||
                        (item.curltCheck == 1 &&
                          item.curltCheck != item.ltCheck)
                      "
                      style="padding-left: 326px; margin-top: 15px"
                    >
                      历史数据是否展示:
                      <el-radio-group v-model="item.oldValue">
                        <el-radio :label="'1'">展示</el-radio>
                        <el-radio :label="'2'">隐藏</el-radio>
                        <el-radio :label="'0'">删除</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </el-col>
          <el-col>
            <div class="infoTitle">工资代发管理类预警</div>
            <ul class="setting">
              <li v-for="(item, index) in list" :key="index">
                <div class="settingList" v-if="item.subcategory == 32">
                  <div class="settingListTitle settingLists">
                    {{ item.bankName }}
                  </div>
                  <div class="settingListSwitch settingLists">
                    预警开关:
                    <el-switch
                      v-model="item.newValue"
                      active-value="1"
                      inactive-value="0"
                      @change="changeRadio($event, index)"
                    ></el-switch>
                  </div>
                  <div
                    class="settingLists"
                    style="width: 700px; vertical-align: top"
                  >
                    <el-select
                      @change="checkTimeTypeValue($event, index, 'gtTimeType')"
                      v-model="item.gtTimeType"
                      placeholder="请选择时间类型"
                      style="width: 135px"
                    >
                      <el-option label="项目建档日期" value="1"></el-option>
                      <el-option label="项目开工日期" value="2"></el-option>
                      <el-option label="自定义日期" value="3"></el-option>
                    </el-select>
                    <el-date-picker
                      @change="checkCustomValue($event, index, 'gtCustom')"
                      style="width: 140px"
                      v-if="item.gtTimeType === '3'"
                      v-model="item.gtCustom"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                    之后，
                    <span v-if="item.name === '04' || item.name === '35'"
                      >超过项目工资发放日</span
                    >
                    <span v-if="item.name === '11'"
                      >银行推送施工企业工资发放信息</span
                    >
                    <span v-if="item.name === '15'"
                      >单人单月单项目累计工资发放金额超过</span
                    >
                    <span v-if="item.name === '16'"
                      >单人单月单项目累计工资发放次数超过</span
                    >
                    <span v-if="item.name === '19'"
                      >该项目工人工资日均（当月工资实发金额/当月考勤天数）发放金额低于当地日均工资最低标准</span
                    >
                    <span v-if="item.name === '20'"
                      >银行推送施工企业工资发放信息</span
                    >
                    <span v-if="item.name === '38'"
                      >工资表自上报之日的次日起，超过</span
                    >
                    <el-input
                      class="settingListInput settingLists"
                      v-if="
                        item.name == '04' ||
                        item.name == '11' ||
                        item.name == '15' ||
                        item.name == '16' ||
                        item.name == '19' ||
                        item.name == '20' ||
                        item.name == '38' ||
                        item.name == '35'
                      "
                      type="number"
                      v-model.number="item.gtValue"
                      @blur="checkBlurValue($event, index, 'gtValue')"
                    ></el-input>
                    <span v-if="item.name === '04'"
                      >天未发放当月工资则进行预警</span
                    >
                    <span v-if="item.name === '35'"
                      >天未发放当月工资则进行预警;(①当月开工日≤0，则不预警；②如项目无工资发放日数据，则以次月最后一日作为当月的工资发放日；)</span
                    >
                    <span v-if="item.name === '11'"
                      >天后，施工企业未将银行回执单上传则预警</span
                    >
                    <span v-if="item.name === '15'">元则预警</span>
                    <span v-if="item.name === '16'">次则预警</span>
                    <span v-if="item.name === '17' || item.name === '36'"
                      >当存在务工人员当月有考勤但未发放工资时预警{{
                        item.name === '36' ? '（按月预警）' : ''
                      }}</span
                    >
                    <span v-if="item.name === '18' || item.name === '37'"
                      >当存在务工人员当月无考勤但成功发放工资时预警{{
                        item.name === '37' ? '（按批次预警）' : ''
                      }}</span
                    >
                    <span v-if="item.name === '19'"
                      >元则预警（当工资为0，或考勤为0则不预警）</span
                    >
                    <span v-if="item.name === '20'"
                      >天后，施工企业未将工人签字确认表上传则预警</span
                    >
                    <span v-if="item.name === '38'"
                      >天，未获取到银行工资代发流水则预警。</span
                    >
                  </div>
                  <div style="padding-left: 326px; margin-top: 15px">
                    预警消除权限：
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermJC"
                      >监察</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermBK"
                      >银行</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermHY"
                      >行业主管</el-checkbox
                    >
                  </div>
                  <div
                    v-if="item.curValue == 1 && item.newValue != item.curValue"
                    style="padding-left: 326px; margin-top: 15px"
                  >
                    历史数据是否展示:
                    <el-radio-group v-model="item.oldValue">
                      <el-radio :label="'1'">展示</el-radio>
                      <el-radio :label="'2'">隐藏</el-radio>
                      <el-radio :label="'0'">删除</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </li>
            </ul>
          </el-col>
          <el-col>
            <div class="infoTitle">工资保证金管理类预警</div>
            <ul class="setting">
              <li v-for="(item, index) in list" :key="index">
                <div class="settingList" v-if="item.subcategory == 33">
                  <div class="settingListTitle settingLists">
                    {{ item.bankName }}
                  </div>
                  <div class="settingListSwitch settingLists">
                    预警开关:
                    <el-switch
                      v-model="item.newValue"
                      active-value="1"
                      inactive-value="0"
                      @change="changeRadio($event, index)"
                    ></el-switch>
                  </div>

                  <div
                    class="settingLists"
                    v-if="item.gtValue != null || item.gtValue != undefined"
                  >
                    超过
                  </div>
                  <div class="settingLists">
                    <el-select
                      @change="checkTimeTypeValue($event, index, 'gtTimeType')"
                      v-model="item.gtTimeType"
                      placeholder="请选择时间类型"
                      style="width: 135px"
                    >
                      <el-option label="项目建档日期" value="1"></el-option>
                      <el-option label="项目开工日期" value="2"></el-option>
                      <el-option label="自定义日期" value="3"></el-option>
                    </el-select>
                    <el-date-picker
                      @change="checkCustomValue($event, index, 'gtCustom')"
                      style="width: 140px"
                      v-if="item.gtTimeType === '3'"
                      v-model="item.gtCustom"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div>
                  <el-input
                    class="settingListInput settingLists"
                    v-if="
                      (item.gtValue != null || item.gtValue != undefined) &&
                      item.name == '12'
                    "
                    type="number"
                    v-model.number="item.gtValue"
                    @blur="checkBlurValue($event, index, 'gtValue')"
                  ></el-input>
                  <div class="settingListTips settingLists">
                    <span v-if="item.name === '12'"
                      >天未录入工资保证金缴存记录则进行预警</span
                    >
                    <span v-if="item.name === '21'"
                      >之后，通过【银行保函/保险保单/业主担保】缴纳的工资保证金小于或等于失效日</span
                    >
                  </div>
                  <el-input
                    class="settingListInput settingLists"
                    v-if="
                      (item.gtValue != null || item.gtValue != undefined) &&
                      item.name == '21'
                    "
                    type="number"
                    v-model.number="item.gtValue"
                    @blur="checkBlurValue($event, index, 'gtValue')"
                  ></el-input>
                  <div class="settingListTips settingLists">
                    <span v-if="item.name === '21'">天则预警</span>
                  </div>
                  <div style="padding-left: 326px; margin-top: 15px">
                    预警消除权限：
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermJC"
                      >监察</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermBK"
                      >银行</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermHY"
                      >行业主管</el-checkbox
                    >
                  </div>
                  <div
                    v-if="item.curValue == 1 && item.newValue != item.curValue"
                    style="padding-left: 326px; margin-top: 15px"
                  >
                    历史数据是否展示:
                    <el-radio-group v-model="item.oldValue">
                      <el-radio :label="'1'">展示</el-radio>
                      <el-radio :label="'2'">隐藏</el-radio>
                      <el-radio :label="'0'">删除</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </li>
            </ul>
          </el-col>
          <el-col>
            <div class="infoTitle">其他管理类预警</div>
            <ul class="setting">
              <li v-for="(item, index) in list" :key="index">
                <div
                  class="settingList"
                  v-if="
                    item.subcategory != 30 &&
                    item.subcategory != 31 &&
                    item.subcategory != 32 &&
                    item.subcategory != 33 &&
                    item.subcategory != 35
                  "
                >
                  <div class="settingListTitle settingLists">
                    {{ item.bankName }}
                  </div>
                  <div class="settingListSwitch settingLists">
                    预警开关:
                    <el-switch
                      v-model="item.newValue"
                      active-value="1"
                      inactive-value="0"
                      @change="changeRadio($event, index)"
                    ></el-switch>
                  </div>

                  <div
                    class="settingLists"
                    v-if="item.gtValue != null || item.gtValue != undefined"
                  >
                    超过
                  </div>
                  <div class="settingLists">
                    <el-select
                      @change="checkTimeTypeValue($event, index, 'gtTimeType')"
                      v-model="item.gtTimeType"
                      placeholder="请选择时间类型"
                      style="width: 135px"
                    >
                      <el-option label="项目建档日期" value="1"></el-option>
                      <el-option label="项目开工日期" value="2"></el-option>
                      <el-option label="自定义日期" value="3"></el-option>
                    </el-select>
                    <el-date-picker
                      @change="checkCustomValue($event, index, 'gtCustom')"
                      style="width: 140px"
                      v-if="item.gtTimeType === '3'"
                      v-model="item.gtCustom"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div>
                  <el-input
                    class="settingListInput settingLists"
                    v-if="item.gtValue != null || item.gtValue != undefined"
                    type="number"
                    v-model.number="item.gtValue"
                    @blur="checkBlurValue($event, index, 'gtValue')"
                  ></el-input>
                  <div class="settingListTips settingLists">
                    <span v-if="item.name === '13'"
                      >天未上传维权公示牌附件则进行预警</span
                    >
                    <span v-if="item.name === '14'"
                      >天未录入工伤保险购保记录则进行预警</span
                    >
                  </div>
                  <div style="padding-left: 326px; margin-top: 15px">
                    预警消除权限：
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermJC"
                      >监察</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermBK"
                      >银行</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermHY"
                      >行业主管</el-checkbox
                    >
                  </div>
                  <div
                    v-if="item.curValue == 1 && item.newValue != item.curValue"
                    style="padding-left: 326px; margin-top: 15px"
                  >
                    历史数据是否展示:
                    <el-radio-group v-model="item.oldValue">
                      <el-radio :label="'1'">展示</el-radio>
                      <el-radio :label="'2'">隐藏</el-radio>
                      <el-radio :label="'0'">删除</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </li>
            </ul>
          </el-col>
          <el-col>
            <div class="infoTitle">银行端预警</div>
            <ul class="setting">
              <li v-for="(item, index) in list" :key="index">
                <div class="settingList" v-if="item.subcategory == 35">
                  <div class="settingListTitle settingLists">
                    {{ item.bankName }}
                  </div>
                  <div class="settingListSwitch settingLists">
                    预警开关:
                    <el-switch
                      v-model="item.newValue"
                      active-value="1"
                      inactive-value="0"
                      @change="changeRadio($event, index)"
                    ></el-switch>
                  </div>
                  <div
                    class="settingLists"
                    style="width: 700px; vertical-align: top"
                  >
                    <span v-if="item.name == '22'">超过</span>
                    <el-select
                      @change="checkTimeTypeValue($event, index, 'gtTimeType')"
                      v-model="item.gtTimeType"
                      placeholder="请选择时间类型"
                      style="width: 135px"
                    >
                      <el-option label="项目建档日期" value="1"></el-option>
                      <el-option label="项目开工日期" value="2"></el-option>
                      <el-option label="自定义日期" value="3"></el-option>
                    </el-select>
                    <el-date-picker
                      @change="checkCustomValue($event, index, 'gtCustom')"
                      style="width: 140px"
                      v-if="item.gtTimeType === '3'"
                      v-model="item.gtCustom"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker
                    >之后，
                    <span v-if="item.name === '22'">项目添加专户超过</span>
                    <span v-if="item.name === '23'">项目提交工资表，超过</span>
                    <span v-if="item.name === '24'"
                      >项目提交工资表，且银行获取了工资台账超过</span
                    >
                    <span v-if="item.name === '25'"
                      >项目专户根据流水计算的余额，与银行接口余额不符则预警</span
                    >
                    <el-input
                      class="settingListInput settingLists"
                      v-if="item.name == '22'"
                      type="number"
                      v-model.number="item.gtValue"
                      @blur="checkBlurValue($event, index, 'gtValue')"
                    ></el-input>
                    <span v-if="item.name === '22'"
                      >天，专户仍为未签约状态则进行预警</span
                    >
                    <span v-if="item.name === '23'"
                      >天，银行仍未获取台账则进行预警</span
                    >
                    <span v-if="item.name === '24'"
                      >天，银行仍未回传结果则进行预警</span
                    >
                    <!-- <span v-if="item.name==='25'">项目专户根据流水计算的余额，与银行接口余额不符则预警</span> -->
                  </div>
                  <div style="padding-left: 326px; margin-top: 15px">
                    预警消除权限：
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermJC"
                      >监察</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermBK"
                      >银行</el-checkbox
                    >
                    <el-checkbox
                      :true-label="'1'"
                      :false-label="'0'"
                      v-model="item.gtRolePermHY"
                      >行业主管</el-checkbox
                    >
                  </div>
                  <div
                    v-if="item.curValue == 1 && item.newValue != item.curValue"
                    style="padding-left: 326px; margin-top: 15px"
                  >
                    历史数据是否展示:
                    <el-radio-group v-model="item.oldValue">
                      <el-radio :label="'1'">展示</el-radio>
                      <el-radio :label="'2'">隐藏</el-radio>
                      <el-radio :label="'0'">删除</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import topTitle from '@/components/publicCom/topTitle'
import moment from 'moment'
export default {
  name: 'alertSetting',
  components: {
    topTitle,
  },
  data() {
    var blurAlertTime15 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('输入值不能为空'))
      }
      if (!new RegExp('^[1-9][0-9]*$').test(value)) {
        callback(new Error('请输入正整数'))
      }
      if (value >= this.alertTimeForm.alertTime30) {
        callback(new Error('数值区间有误，请重新输入'))
      } else {
        callback()
      }
    }
    var blurAlertTime30 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('输入值不能为空'))
      }
      if (!new RegExp('^[1-9][0-9]*$').test(value)) {
        callback(new Error('请输入正整数'))
      }
      if (value <= this.alertTime15Fun) {
        callback(new Error('数值区间有误，请重新输入'))
      }
      if (value >= this.alertTimeForm.alertTime60) {
        callback(new Error('数值区间有误，请重新输入'))
      } else {
        callback()
      }
    }
    var blurAlertTime60 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('输入值不能为空'))
      }
      if (!new RegExp('^[1-9][0-9]*$').test(value)) {
        callback(new Error('请输入正整数'))
      }
      if (value <= this.alertTime30Fun) {
        callback(new Error('数值区间有误，请重新输入'))
      } else {
        callback()
      }
    }
    return {
      titleText: '预警设置',
      titleExplain:
        '修改预警设置后第二天00:00生效，修改前已产生的预警不受修改影响，按照此前的规则运行。',
      areaId: [],
      areaIds: '',
      staticAreaId: '',
      configTime: '',
      areaIdOpt: [],
      list: [],
      showDelete: true, // 如果当前区域没有配置 则不显示充值配置按钮
      alertTimeForm: {
        alertTime15: 15,
        alertTime30: 30,
        alertTime60: 60,
      },
      alertTimeRules: {
        alertTime15: [{ validator: blurAlertTime15, trigger: 'blur' }],
        alertTime30: [{ validator: blurAlertTime30, trigger: 'blur' }],
        alertTime60: [{ validator: blurAlertTime60, trigger: 'blur' }],
      },
      alertDegree: [],
      degreeInputDisabled: false,
    }
  },
  computed: {
    alertTime15Fun() {
      return this.alertTimeForm.alertTime15 + 1
    },
    alertTime30Fun() {
      return this.alertTimeForm.alertTime30 + 1
    },
    alertTime60Fun() {
      return this.alertTimeForm.alertTime60 + 1
    },
  },
  mounted() {
    this.configTime = this.formatDate()
    this.initAreaId()
  },
  methods: {
    changeRadio(e, index) {
      if (e == 0 && this.list[index].curValue == 1) {
        if (this.list[index].oldValue == '-1') {
          let item = JSON.parse(JSON.stringify(this.list[index]))
          item.oldValue = '1'
          this.$set(this.list, index, item)
        }
      }
    },
    checkBlurValue(e, index, str) {
      if (!e.target.value) {
        this.$message({
          type: 'warning',
          message: '输入值不能为空',
        })
        if (this.list[index].name == '15') {
          e.target.value = '20000'
          this.list[index][str] = 20000
        } else if (
          this.list[index].name == '16' ||
          this.list[index].name == '20'
        ) {
          e.target.value = '5'
          this.list[index][str] = 5
        } else if (this.list[index].name == '19') {
          e.target.value = '200'
          this.list[index][str] = 200
        } else {
          e.target.value = '30'
          this.list[index][str] = 30
        }
      } else if (e.target.value < 1) {
        this.$message({
          type: 'warning',
          message: '请输入正整数',
        })
        if (this.list[index].name == '15') {
          e.target.value = '20000'
          this.list[index][str] = 20000
        } else if (
          this.list[index].name == '16' ||
          this.list[index].name == '20'
        ) {
          e.target.value = '5'
          this.list[index][str] = 5
        } else if (this.list[index].name == '19') {
          e.target.value = '200'
          this.list[index][str] = 200
        } else {
          e.target.value = '30'
          this.list[index][str] = 30
        }
      } else {
        if (e.target.value % 1 !== 0) {
          this.$message({
            type: 'warning',
            message: '请输入正整数',
          })
          if (this.list[index].name == '15') {
            e.target.value = '20000'
            this.list[index][str] = 20000
          } else if (
            this.list[index].name == '16' ||
            this.list[index].name == '20'
          ) {
            e.target.value = '5'
            this.list[index][str] = 5
          } else if (this.list[index].name == '19') {
            e.target.value = '200'
            this.list[index][str] = 200
          } else {
            e.target.value = '30'
            this.list[index][str] = 30
          }
        }
      }
    },
    changeFirst(e, index, str) {
      if (e == 0 && this.list[index].curValue == 1) {
        if (this.list[index].oldValue == '-1') {
          let item = JSON.parse(JSON.stringify(this.list[index]))
          item.oldValue = '1'
          this.$set(this.list, index, item)
        }
      }
      if (this.list[index].name == '03') {
        this.list[index][str] = e
      }
    },
    changeSecond(e, index, str) {
      if (e == 0 && this.list[index].curValue == 1) {
        if (this.list[index].oldValue == '-1') {
          let item = JSON.parse(JSON.stringify(this.list[index]))
          item.oldValue = '1'
          this.$set(this.list, index, item)
        }
      }
      this.list[index][str] = e
    },
    add0(num) {
      return num < 10 ? '0' + num : num
    },
    formatDate() {
      const nowDate = new Date(new Date().toLocaleDateString()) //获取当前时间
      const time = new Date(nowDate.getTime() + 24 * 60 * 60 * 1000)
      const year = time.getFullYear()
      const month = time.getMonth() + 1
      const day = time.getDate()
      const h = time.getHours()
      const minute = time.getMinutes()
      const second = time.getSeconds()
      return (
        year +
        '-' +
        this.add0(month) +
        '-' +
        this.add0(day) +
        ' ' +
        this.add0(h) +
        ':' +
        this.add0(minute) +
        ':' +
        this.add0(second)
      )
    },
    getAreaId() {
      this.areaIds = this.areaId[this.areaId.length - 1]
      this.getAlertList(this.areaIds)
    },
    initAreaId() {
      this.axios
        .post('api-m/paramconfig/expand/areaTreeByUser')
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.areaIdOpt = response.data.result
              this.areaId[0] = response.data.result[0].value
              this.areaIds = response.data.result[0].value
              this.staticAreaId = response.data.result[0].value
              if (this.staticAreaId.length > 4) {
                this.degreeInputDisabled = true
              } else {
                this.degreeInputDisabled = false
              }
              this.getAlertList(response.data.result[0].value)
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getAlertList(areaId) {
      this.findAlertDegreeConfig(areaId)
      this.axios
        .post('api-m/paramconfig/expand/findAlertConfig', {
          areaId,
          configTime: this.configTime,
        })
        .then((res) => {
          const { alertSetting } = require('@/kits/configSetting')
          if (res && !res.data.hasError) {
            let arr = []
            if (res.data.result) {
              //判断数据库保存的是否是最新的配置
              if (res.data.result.length < alertSetting.length) {
                let curArr = res.data.result
                alertSetting.forEach((item, index) => {
                  for (let i = 0; i < curArr.length; i++) {
                    if (item.name == curArr[i].name) {
                      alertSetting[index] = curArr[i]
                      break
                    }
                  }
                })
                arr = alertSetting
              } else {
                arr = res.data.result
              }
              let superiorConfig = res.data.result[0].superiorConfig
              this.showDelete = !superiorConfig
            } else {
              arr = alertSetting
              this.showDelete = false
            }

            if (arr.length) {
              arr.forEach((item) => {
                let valueList = item.value.split(',')
                item.valueList = valueList
                item.newValue = valueList[0]
                item.curValue = valueList[0]
                item.oldValue = valueList[valueList.length - 1]
                // item.oldValue = item.oldValue == -1 ? '1' : item.oldValue  //如果是已处理的状态 预警记录状态则为显示状态
                item.oldValue = item.oldValue //如果是已处理的状态 预警记录状态则为显示状态

                // Value值格式为:”0,mo,1:2021-07-05,-1” ,
                //第一 位为是否起用,
                //第二 位为权限角色(mo为监察, ba为银行,al为两者都有no为都没有),
                //第三位为所选时间类型以及自定义时间，
                //  ':'前为所选预警时间类型(1为建档时间,2为开工时间,3为自定义时间)
                //  当所选时间类型为'1 '或'2'时':'后面拼接上一个默认时间,
                //  当类型为3'时:后拼接上用户所自定义的时间，后面拼接的逻辑与之前的配置相同;
                // [{value:"0,ge_30,-1}]  3
                // [{value:"0,ge_30,lt_1,-1}] 4
                // [{value:"0,ge_30,le_1,0,ge_1,-1}] 6
                // [{value:"0,mo,3:2021-05-07,-1}] 4
                // [{value:"0,mo,3:2021-05-07,ge_30,-1}]  5
                // [{value:"0,no,3:2021-05-07,ge_30,lt_1,-1}] 6
                // [{value:"0,ba,3:2021-05-07,ge_30,le_1,0,ge_1,-1}] 8
                if (valueList.length == 3) {
                  let midValue = valueList[1].split('_')
                  item.gtValue = midValue[1]
                }
                if (valueList.length == 4) {
                  let temp = valueList[2]
                  if (temp.indexOf(':') == -1) {
                    let midValue = valueList[1].split('_')
                    item.gtValue = midValue[1]

                    let midValue2 = valueList[2].split('_')
                    item.ltValue = midValue2[1]
                  }
                }
                if (valueList.length == 5) {
                  let midValue = valueList[3].split('_')
                  item.gtValue = midValue[1]
                }
                item.gtRolePerm = []
                item.gtTimeType = '1'
                item.gtCustom = moment().format('YYYY-MM-DD')

                let temp = valueList[2]

                if (temp && temp.indexOf(':') != -1) {
                  // if(valueList[1]==="al"){
                  //     item.gtRolePerm = ["mo","ba"];
                  // }else if(valueList[1]==="mo"||valueList[1]==="ba"){
                  //     item.gtRolePerm = [valueList[1]];
                  // }
                  var arr = valueList[1].split('')
                  item.gtRolePermJC = arr[0]
                  item.gtRolePermBK = arr[1]
                  item.gtRolePermHY = arr[2]
                  let timeCustom = valueList[2]
                  let timeCustoms = timeCustom.split(':')
                  item.gtTimeType = timeCustoms[0]
                  item.gtCustom = timeCustoms[1]
                }

                if (valueList.length == 6) {
                  let temp = valueList[2]
                  if (temp.indexOf(':') != -1) {
                    let midValue = valueList[3].split('_')
                    item.gtValue = midValue[1]

                    let midValue2 = valueList[4].split('_')
                    item.ltValue = midValue2[1]
                  } else {
                    let midValue = valueList[1].split('_')
                    item.gtValue = midValue[1]

                    let midValue2 = valueList[2].split('_')
                    item.ltValue = midValue2[1]
                    item.ltCheck = valueList[3]
                    item.curltCheck = valueList[3]

                    let midValue3 = valueList[4].split('_')
                    item.gtValue2 = midValue3[1]
                  }
                }
                if (valueList.length == 8) {
                  let midValue = valueList[3].split('_')
                  item.gtValue = midValue[1]

                  let midValue2 = valueList[4].split('_')
                  item.ltValue = midValue2[1]

                  item.ltCheck = valueList[5]
                  item.curltCheck = valueList[5]
                  let midValue3 = valueList[6].split('_')
                  item.gtValue2 = midValue3[1]
                }
              })
            }
            this.list = arr
          }
        })
    },
    save() {
      this.$confirm('修改预警设置后第二天00:00生效, 是否确认修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.handleSave()
        })
        .catch((error) => {
          console.log(error)
          this.$message({
            type: 'info',
            message: '已取消修改',
          })
        })
    },
    getRolePerm(item) {
      var rolePerm = ''
      // if(item.gtRolePerm.length==1){
      //     rolePerm = item.gtRolePerm[0];
      // }else if(item.gtRolePerm.length > 1){
      //     rolePerm = 'al';
      // }
      rolePerm = item.gtRolePermJC + item.gtRolePermBK + item.gtRolePermHY
      return rolePerm
    },
    getTimeCustom(item) {
      let time = moment().format('YYYY-MM-DD')
      if (item.gtTimeType === '3') {
        time = item.gtCustom
      }
      return item.gtTimeType + ':' + time
    },
    handleSave() {
      let arr = this.list
      let curArr = []
      arr.forEach((item) => {
        if (item.newValue == 1) {
          item.oldValue = 1
        }
        let rolePerm = this.getRolePerm(item)
        let timeCustom = this.getTimeCustom(item)
        if (item.valueList.length == 2) {
          let value =
            item.newValue +
            ',' +
            rolePerm +
            ',' +
            timeCustom +
            ',' +
            item.oldValue
          curArr.push({ name: item.name, value })
        }

        if (item.valueList.length == 3 || item.valueList.length == 5) {
          let value = ''
          //这两条的规则是大于，不是大于等于
          if (item.name == '16' || item.name == '15') {
            value =
              item.newValue +
              ',' +
              rolePerm +
              ',' +
              timeCustom +
              ',' +
              'gt_' +
              item.gtValue +
              ',' +
              item.oldValue
          }
          if (item.name == '21') {
            value =
              item.newValue +
              ',' +
              rolePerm +
              ',' +
              timeCustom +
              ',' +
              'le_' +
              item.gtValue +
              ',' +
              item.oldValue
          } else {
            value =
              item.newValue +
              ',' +
              rolePerm +
              ',' +
              timeCustom +
              ',' +
              'ge_' +
              item.gtValue +
              ',' +
              item.oldValue
          }

          curArr.push({ name: item.name, value })
        }
        if (item.valueList.length == 4) {
          if (item.gtValue && item.ltValue) {
            let value =
              item.newValue +
              ',' +
              rolePerm +
              ',' +
              timeCustom +
              ',' +
              'ge_' +
              item.gtValue +
              ',' +
              'lt_' +
              item.ltValue +
              ',' +
              item.oldValue
            curArr.push({ name: item.name, value })
          } else {
            let value =
              item.newValue +
              ',' +
              rolePerm +
              ',' +
              timeCustom +
              ',' +
              item.oldValue
            curArr.push({ name: item.name, value })
          }
        }
        if (item.valueList.length == 6) {
          if (!item.ltCheck || !item.gtValue2) {
            let value =
              item.newValue +
              ',' +
              rolePerm +
              ',' +
              timeCustom +
              ',' +
              'ge_' +
              item.gtValue +
              ',' +
              'lt_' +
              item.ltValue +
              ',' +
              item.oldValue
            curArr.push({ name: item.name, value })
          } else {
            let value =
              item.newValue +
              ',' +
              rolePerm +
              ',' +
              timeCustom +
              ',' +
              'ge_' +
              item.gtValue +
              ',' +
              'le_' +
              item.ltValue +
              ',' +
              item.ltCheck +
              ',' +
              'ge_' +
              item.gtValue2 +
              ',' +
              item.oldValue
            curArr.push({ name: item.name, value })
          }
        }
        if (item.valueList.length == 8) {
          let value =
            item.newValue +
            ',' +
            rolePerm +
            ',' +
            timeCustom +
            ',' +
            'ge_' +
            item.gtValue +
            ',' +
            'le_' +
            item.ltValue +
            ',' +
            item.ltCheck +
            ',' +
            'ge_' +
            item.gtValue2 +
            ',' +
            item.oldValue
          curArr.push({ name: item.name, value })
        }
      })
      console.log(curArr)
      if (!this.isEsUser()) {
        this.editAlertDegreeConfig()
      }
      this.axios
        .post('api-m/paramconfig/expand/editAlertConfig', {
          areaId: this.areaIds,
          paramConfigVOList: JSON.stringify(curArr),
        })
        .then((res) => {
          if (res && !res.data.hasError) {
            this.$message({
              type: 'success',
              message: '预警设置成功，第二天00:00生效',
            })
            this.getAlertList(this.areaIds)
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
        })
    },
    clearSetting(areaId) {
      this.$confirm(
        '清除配置将默认采用最上级区域的配置, 是否确定清除?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.sureClear(areaId)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    sureClear(areaId) {
      this.axios
        .post('api-m/paramconfig/expand/deleteAlertConfigByArea', { areaId })
        .then((res) => {
          if (!res.data.hasError) {
            this.getAlertList(this.areaIds)
          } else {
            this.$message({
              type: 'info',
              message: res.data.errMessage,
            })
          }
        })
    },
    checkTimeTypeValue(e, index, str) {
      this.list[index][str] = e
    },
    checkCustomValue(e, index, str) {
      this.list[index][str] = e
    },
    findAlertDegreeConfig(areaId) {
      this.axios
        .post('api-m/paramconfig/expand/findAlertDegreeConfig', {
          areaId: areaId,
        })
        .then((res) => {
          if (res && !res.data.hasError) {
            //0-15:#F4E829,16-30:#F59A23,31-60:#D9001B,61-99999999:#6D000E
            this.alertDegree = [
              {
                name: '01',
                value:
                  '0-15:#F4E829,16-30:#F59A23,31-60:#D9001B,61-99999999:#6D000E',
              },
            ]
            if (res.data.result && res.data.result.length > 0) {
              this.alertDegree = res.data.result
            }
            let arrs = this.alertDegree[0].value
            let dayColorStr = arrs.split(',')
            let dc1, dc2, dc3, dc4
            let day1_1, day1_2, day2_1, day2_2, day3_1, day3_2, day4_1, day4_2
            let color1, color2, color3, color4
            dc1 = dayColorStr[0].split(':')
            dc2 = dayColorStr[1].split(':')
            dc3 = dayColorStr[2].split(':')
            dc4 = dayColorStr[3].split(':')
            color1 = dc1[1]
            color2 = dc2[2]
            color3 = dc3[3]
            color4 = dc4[4]
            day1_1 = dc1[0].split('-')[0]
            day1_2 = dc1[0].split('-')[1]
            day2_1 = dc2[0].split('-')[0]
            day2_2 = dc2[0].split('-')[1]
            day3_1 = dc3[0].split('-')[0]
            day3_2 = dc3[0].split('-')[1]
            day4_1 = dc4[0].split('-')[0]
            day4_2 = dc4[0].split('-')[1]
            this.alertTimeForm.alertTime15 = Number(day1_2)
            this.alertTimeForm.alertTime30 = Number(day2_2)
            this.alertTimeForm.alertTime60 = Number(day3_2)
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
        })
    },
    editAlertDegreeConfig() {
      this.$refs['alertTimeForm'].validate((valid) => {
        if (valid) {
          //0-15:#F4E829,16-30:#F59A23,31-60:#D9001B,61-99999999:#6D000E
          let valStr =
            '0-' +
            this.alertTimeForm.alertTime15 +
            ':#F4E829,' +
            this.alertTime15Fun +
            '-' +
            this.alertTimeForm.alertTime30 +
            ':#F59A23,' +
            this.alertTime30Fun +
            '-' +
            this.alertTimeForm.alertTime60 +
            ':#D9001B,' +
            this.alertTime60Fun +
            '-99999999:#6D000E'
          let value = [{ name: this.alertDegree[0].name, value: valStr }]
          this.axios
            .post('api-m/paramconfig/expand/editAlertDegreeConfig', {
              areaId: this.areaIds,
              paramConfigVOList: JSON.stringify(value),
            })
            .then((res) => {})
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.noDataTip {
  color: #666;
  padding-bottom: 24px;
  font-size: 14px;
  padding-left: 30px;
}
/deep/.el-radio-group {
  margin-left: 40px;
}
.mainCon {
  padding: 24px;
  //   height: calc(100% - 67px);
  //   overflow-y: auto;
  .infoTitle {
    font-size: 16px;
    padding: 18px 24px;
    background: #f5f7fb;
    color: #333;
    font-weight: 700;
  }
  .alert-time {
    width: 50px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .settingList {
    padding: 10px 0;
    line-height: 26px;
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #eee;
    &:last-child {
      border-bottom: transparent 1px;
    }
    .settingLists {
      display: inline-block;
    }
    .alertTag {
      display: inline-block;
      width: 20px;
      height: 20px;
      vertical-align: middle;
      margin-left: 5px;
    }
    .alertTagBg-15 {
      background-color: #f4e829;
    }
    .alertTagBg-16-30 {
      background-color: #f59a23;
    }
    .alertTagBg-31-60 {
      background-color: #d9001b;
    }
    .alertTagBg-61 {
      background-color: #6d000e;
    }
    .settingListTitle {
      width: 170px;
    }
    .settingListSwitch {
      width: 150px;
    }
    /deep/.settingListInput {
      width: 80px;
      height: 36px;
      line-height: 36px;
      .el-input__inner {
        padding: 0 0 0 15px;
      }
    }
  }
}

.alertTimeRulesBox {
  padding-top: 24px !important;
  padding-bottom: 2px !important;
}

.setting {
  margin: 14px 0;
}
</style>
